<template>
  <div>
    <template v-if="checkDate == 0"></template>
    <template v-else>
      <TagButton v-if="!setColumnValue" @click="handlerClick" />
      <div class="txt" v-else>
        <el-text>{{ setColumnValue }}</el-text>
        <el-text v-if="row.clockinStatus === 1" type="warning">(补)</el-text>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import * as utils from '../../utils'
import TagButton from './TagButton.vue'

const emit = defineEmits(['click'])
const props = defineProps({
  row: {
    type: Object as any,
    default: () => {},
  },
  columnKey: {
    type: String,
    default: '',
  },
  showType: {
    type: Number,
    default: -1,
  },
})

const handlerClick = () => {
  emit('click', { ...props })
}
const checkDate = computed(() => {
  return utils.isDateLessThanOrEqual(new Date(props.columnKey), new Date())
})
const setColumnValue = computed(() => {
  const value = props.row[props.columnKey + '-' + props.showType]
  if (value === '') {
    return null
  } else {
    return value
  }
})
</script>
<style lang="scss" scoped>
.txt {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 2;
}
</style>
